<template>
    <!-- 固定组价，会常驻在页面顶部 -->
    <el-affix :offset="0">
        <div class="top-bar">
            <!-- 用户头像部分 -->
            <el-avatar
                style="font-size: 30px;background-color: red;margin-top: 10px;margin-left: 60px;"
            >
                {{ account.$state.userInfo?.username.charAt(0) }}
            </el-avatar>
            <!-- 欢迎语 -->
            <span style="font-size: 25px;color: red;margin-top: 10px;margin-left: 20px;">
                欢迎您的光临~
            </span>
            <!-- 搜索栏部分 -->
            <span>
                <el-input
                    v-model="searchText"
                    placeholder="搜索感兴趣的商品"
                    style="width: 700px;margin-left: 40px;height: 40px;"
                    input-style="color:red"
                >
                    <template #append>
                        <el-icon style="color: red;">
                            <el-button icon="search" />
                        </el-icon>
                    </template>
                </el-input>
            </span>
            <!-- 登出按钮 -->
            <el-button
                type="primary"
                style="background-color: red;border-color: red;margin-left: 60px;"
                @click="logout"
            >
                注销
            </el-button>
        </div>
    </el-affix>
    <!-- 主流功能区 -->
    <div class="container">
        <router-view></router-view>
    </div>
</template>
<script lang="ts" setup>
// 引入模块
import { useAccountStore } from '../base/AccountStore.ts';
import { useRouter } from 'vue-router';
import { PageName } from '../base/Router.ts';
import { ref } from 'vue';

const router = useRouter();
const account = useAccountStore();
// 绑定到搜索栏的属性
const searchText = ref('');
// 登出方法
const logout = () => {
    account.logout();
    router.replace({
        name: PageName.login
    });
}
</script>
<style scoped>
    .top-bar {
        width: 100%;
        background-color: white;
        border-bottom: 2px red solid;
        height: 60px;
        display: flex;
        align-items: baseline;
        padding-bottom: 12px;
    }
    .container {
        margin: 0px 60px;
    }
</style>